<template>
  <view class="px-2">
    <wd-form ref="form" :rules="props.rules">
      <wd-cell-group
        custom-class="group"
        :title="category"
        v-for="([category, items], catIndex) in Object.entries(schemaList)"
        :key="catIndex"
        class="flex justify-between flex-wrap"
      >
        <view
          v-for="(item, index) in items"
          :key="`${catIndex}-${index}`"
          :style="{ width: item.width ? `${item.width}%` : '100%' }"
        >
          <wd-input
            v-if="item.type === 'Input'"
            :label="item.label"
            :label-width="item?.width ? 0 : '100px'"
            show-word-limit
            :prop="item.field"
            :suffix-icon="item.suffixIcon"
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
            @clicksuffixicon="item.clicksuffixicon"
          />
          <wd-input
            v-if="item.type === 'Password'"
            :label="item.label"
            :label-width="item?.width ? 0 : '100px'"
            show-word-limit
            :prop="item.field"
            suffix-icon="warn-bold"
            type="password"
            clearable
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
          />
          <wd-cell
            :title="item.label"
            title-width="100px"
            v-if="item.type === 'Number'"
          >
            <view style="text-align: left">
              <wd-input-number v-model="formData[item.field]" />
            </view>
          </wd-cell>
          <wd-picker
            v-if="item.type === 'Select'"
            :label="item.label"
            :label-width="item?.width ? 0 : '100px'"
            :prop="item.field"
            :columns="item.options"
            clearable
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
          />
          <wd-textarea
            v-if="item.type === 'Textarea'"
            :label="item.label"
            :label-width="item?.width ? 0 : '100px'"
            max-length="200"
            :prop="item.field"
            clearable
            v-model="formData[item.field]"
            :placeholder="item.placeholder"
          />
          <wd-datetime-picker
            v-if="item.type === 'Time'"
            :default-value="defaultValue"
            v-model="formData[item.field]"
            :label="item.label"
          />
          <view v-if="item.type === 'Address'" class="relative">
            <wd-picker
              :columns="item.options"
              :label="item.label"
              :label-width="item?.width ? 0 : '100px'"
              v-model="formData[item.field]"
            />
          </view>
        </view>
      </wd-cell-group>
    </wd-form>
  </view>
  <view class="w-[98%] h-auto bg-[#f5f5f5] pl-0!">
    <view
      class="bottom-0 bg-white w-[100%] h-[80px] flex justify-between items-center z-[2]"
      :style="customStyle"
    >
      <view
        class="w-[46%] h-[auto] py-2 flex justify-center items-center border-[1px] border-solid border-[#4caf50] rounded-[10px] text-[#4caf50]"
        @click="reset"
        >重置</view
      >
      <view
        class="w-[46%] h-[auto] bg-[#4caf50] py-2 flex justify-center items-center border-[1px] border-solid border-[#4caf50] rounded-[10px] text-[#fff]"
        @click="handleSubmit"
        >提交</view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, type PropType, onMounted } from 'vue'
import { groupBy } from '@/utils/others'

const defaultValue = ref<number>(Date.now())

const emit = defineEmits(['register', 'formSubmit', 'reset'])

// 动态接收参数，配合钩子进行数据控制
const props = defineProps({
  rules: {
    type: Object,
    required: true
  },
  formSchema: {
    type: Array as PropType<IFormSchema[]>,
    required: true
  },
  customStyle: {
    type: String,
    default: () => 'position: fixed'
  }
})

const formData = ref<Record<string, any>>({})

const schemaList = groupBy(props.formSchema, (item) => item?.cell ?? '')

const reset = () => {
  for (const key in formData.value) {
    formData.value[key] = ''
  }
}
const handleSubmit = () => {
  console.log(
    '[Child] submit clicked ->',
    JSON.parse(JSON.stringify(formData.value))
  )
  // 先打印再发事件，方便看是否触发子组件内部
  emit('formSubmit', formData.value)
}

onMounted(() => {
  props.formSchema.forEach((item) => {
    formData.value[item.field] = ''
  })
  emit('register', formData.value)
})
</script>

<style lang="scss" scoped>
.footer {
  padding: 12px;
}
::v-deep .wd-cell-group .wd-cell-group__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 20rpx;
}

// 深度选择器
::v-deep .wd-input {
  border: 1px solid #4caf50 !important;
  border-radius: 4px !important;
}

::v-deep .wd-input__label {
  width: 0;
}

::v-deep .wd-textarea__label {
  width: 0;
}

::v-deep .wd-textarea {
  border: 1px solid #4caf50 !important;
  border-radius: 4px !important;
}

::v-deep .wd-picker__cell {
  border: 1px solid #4caf50 !important;
  border-radius: 4px !important;
}
</style>
